<template>
	<view>
		<view>
			<table-title content="水电表详细管理"></table-title>

			<!-- <small-title content="当前房间水电表信息"></small-title> -->
			<view style="margin-left: 50rpx;margin-right: 50rpx;">
				<uni-forms :modelValue="orderInfo">
					<uni-forms-item label="楼盘" name="build">
						<uni-easyinput :disabled="true" name="build" style="background-color: #ffffff;" type="text" v-model="orderInfo.build" />
					</uni-forms-item>
					<uni-forms-item label="楼层" name="floor">
						<uni-easyinput :disabled="true" name="floor" style="background-color: #ffffff;" type="text" v-model="orderInfo.floor" />
					</uni-forms-item>
					<uni-forms-item label="单元" name="unit">
						<uni-easyinput :disabled="true" name="unit" style="background-color: #ffffff;" type="text" v-model="orderInfo.unit" />
					</uni-forms-item>
					<uni-forms-item required label="电表读数" name="electricity">
						<!-- <uni-easyinput name="electricity"  @input="checkElec" style="background-color: #ffffff;" type="number" v-model="orderInfo.electricity" /> -->
					</uni-forms-item>
					<view style="margin-left: 3%;margin-right: 0rpx;">
						<uni-table :newMinWidth="0" border stripe emptyText="暂无更多数据" >
							<!-- 表头行 -->
							<uni-tr>
								<uni-th style="width: 50rpx;" align="center">序号</uni-th>
								<uni-th style="width: 50rpx;" align="center">编号</uni-th>
								<uni-th style="width: 50rpx;" align="center">读数</uni-th>
								<uni-th></uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item,index) in goodList" :key="index">
								<uni-td  align="center">
									<view style="width: 60rpx;">{{index + 1}}</view>
								</uni-td>
								<uni-td>
									<view style="width: 100rpx;">
										<input type="text" v-model="item.goodsName" placeholder="请输入" />
									</view>
								</uni-td>
								<uni-td>
									<view style="width: 100rpx;">
										<input type="number" v-model="item.amount" placeholder="请输入" @input="check(index)" />
									</view>
								</uni-td>
								<uni-td>
									<view style="width: 100rpx;">
										<button style="width: 150rpx;margin-left: 0rpx;font-size: 28rpx;" @click="deleteGoods(index)">删除</button>
									</view>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
					<button class="add-button" @click="addGoods()">添加电表+</button>
					<uni-forms-item required label="公共区域用电" name="publicElectricity">
						<uni-easyinput name="publicElectricity" @input="checkPublicElectricity" style="background-color: #ffffff;" type="number" v-model="orderInfo.publicElectricity" />
					</uni-forms-item>
					<uni-forms-item label="水表读数" name="water">
						<uni-easyinput name="water" @input="checkWater" style="background-color: #ffffff;" type="number" v-model="orderInfo.water" />
					</uni-forms-item>
					<uni-forms-item label="本月状态" name="state">

						<uni-easyinput name="orderInfo.state" style="background-color: #ffffff;" type="text" v-model="orderInfo.state" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item required label="选择录入月份" name="useDate">
					
						<uni-datetime-picker
							type="date"
							:disabled="isHistory"
							:value="useDate"
							:end="currentDate"
							@change="change"
						/>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view v-if="isHistory" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="addOrder">录入</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="!isHistory" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="addOrder">录入</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="checkHistory">查看历史</button>
				</view>
			</view>
		</view>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE_2,
		syncGetOrder
	} from "../../../util/network.js"
	import {
		processHistoryList,
		getNowFormatDate
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				orderInfo:{
					'build':'',
					'floor':'',
					'unit':'',
					'date':'',
					'state':'',
					'desc':'',
					'water':'',
					'electricity':'',
					'publicElectricity':''
				},
				useDate:'',
				buildId:0,
				processFlag:false,
				recordId: -1,
				status:-1,
				goodList:[{'goodsName':'','amount':'','unit':''}],
				stateList:['正常','异常'],
				index:0,
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				token:'',
				currentDate:'',
				isHistory:false,
			}
		},
		methods: {
			check: function(index) {
				//正则表达试
				let temp = (this.goodList[index].amount.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.goodList[index].amount= temp
				})
			},
			checkPublicElectricity: function(index) {
				//正则表达试
				let temp = (this.orderInfo.publicElectricity.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.orderInfo.publicElectricity= temp
				})
			},
			checkWater: function(index) {
				//正则表达试
				let temp = (this.orderInfo.water.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.orderInfo.water= temp
				})
			},
			checkElec: function(index) {
				//正则表达试
				let temp = (this.orderInfo.electricity.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.orderInfo.electricity= temp
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.status = this.index
				this.orderInfo.state = this.stateList[this.index]
			},
			addGoods(){
				console.log('点击了添加')
				if(this.goodList == null){
					this.goodList = []
				}
				this.goodList.push({'goodsName':'','amount':'','unit':''})
			},
			deleteGoods(index){
				if(this.goodList.length <= 1){
					let temp = {'goodsName':'','amount':''}
					this.$set(this.goodList,index,temp)
					return
				}
				this.goodList.splice(index,1)
			},
			change(e) {
				this.useDate = e;
				console.log("-change事件:", e);
			},
			checkPara(){
				let flag = 0
				if(this.orderInfo.publicElectricity == null || this.orderInfo.publicElectricity == ''){
					uni.showModal({
						content:'请输入公共区域用电',
						showCancel:false
					})
					flag = -1
					return flag
				}
				if(this.goodList.length == 0){
					uni.showModal({
						content:'请添加电表',
						showCancel:false
					})
					flag = -1
					return flag
				}
				for(var i = 0; i < this.goodList.length; i++){
					console.log(item)
					this.goodList[i].goodsName = this.goodList[i].goodsName.trim()
					let item = this.goodList[i]
					if(item.goodsName == ""){
						uni.showModal({
							content:'电表编号不能为空',
							showCancel:false
						})
						flag = -1
						break
					}
					if(item.amount == null || item.amount == "" || item.amount < 0){
						uni.showModal({
							content:'请输入电表读数',
							showCancel:false
						})
						flag = -1
						break
					}
				}
				return flag
			},
			addOrder(){
				if(this.orderInfo.state == "已缴费"){
					uni.showModal({
						content:'已完成缴费，无法补录入',
						showCancel:false
					})
					return -1
				}
				if(this.checkPara() == -1){
					return -1
				}
				if(this.orderInfo.water == null || !(this.orderInfo.water >= 0)){
					this.orderInfo.water = 0
				}
				console.log('this.orderInfo.publicElectricity',this.orderInfo.publicElectricity)
				this.orderInfo.desc = this.orderInfo.desc.trim()
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/meter-cc/mod-eng/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						userId:this.recordId,
						buildId:this.buildId,
						floor:this.orderInfo.floor,
						houseNumber:this.orderInfo.unit,
						electricity:JSON.stringify(this.goodList),
						publicElectricity:Number(this.orderInfo.publicElectricity),
						water:this.orderInfo.water,
						useDate:this.useDate,
					},
					method:'POST',
					success: function (res) {
						console.log("提交录入成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("提交巡查调用失败")
					}
				})
			},
			checkHistory(){
				uni.navigateTo({
					url:'../history/historySelf?id=' + this.recordId
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//传入单号
			this.token = uni.getStorageSync('token')
			this.recordId = parseInt(option.id)
			this.orderInfo.build = option.buildName
			this.orderInfo.floor = option.houseFloor
			this.orderInfo.unit = option.houseNumber
			this.orderInfo.water = option.water
			this.orderInfo.publicElectricity = option.publicElectricity
			console.log('diandushu',option.electricity)
			if(option.electricity == 'null' || option.electricity == '未录入'){
				this.goodList = [{'goodsName':'','amount':''}]
			}else{
				this.goodList = []
				let electricityArray = JSON.parse(option.electricity)
				electricityArray.forEach(item => {
					this.goodList.push(item)
				})
			}
			// this.orderInfo.electricity = option.electricity
			this.orderInfo.state = option.state
			let  newdate=getNowFormatDate().split(' ')[0]
			this.currentDate = newdate
			if(option.useDate != null && option.useDate != ''){
				this.orderInfo.date = option.useDate
				this.useDate = option.useDate + '-01'
			}else{
				this.orderInfo.date = newdate
				this.useDate = newdate
			}
			if(option.isHistory != null && option.isHistory != ''){
				this.isHistory = true
			}
			this.buildId = parseInt(option.buildId)
			console.log("this.orderInfo",this.orderInfo)
		},
		mounted() {
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 50rpx;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 200rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
</style>
